﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8"/>
    <title></title>
</head>
<body>
<script>
        var exampleSocket;
        
        const showElement = (e, ok) => e.style.display = 'block';
        const hideElement = (e, ok) => e.style.display = 'none';
        function connectSocket() {
            var wsurl = document.getElementById("wsurl").value;
            exampleSocket = new WebSocket(
                wsurl
            );
            exampleSocket.onmessage = (event) => {
                document.getElementById("consoleLog").innerText = event.data;
            };
            hideElement(document.getElementById("not-connected"));
            showElement(document.getElementById("connected"));
        }

        function sendMessage() {
            exampleSocket.send(document.getElementById("message").value);
        }

        function disconnectSocket() {
            exampleSocket.close();
            showElement(document.getElementById("not-connected"));
            hideElement(document.getElementById("connected"));
        }

    </script>
<div class="px-4 py-5 sm:p-6">
    <h3>Enter WebSocket URL and click "Connect"</h3>
    <form>
        <div id="not-connected">
            <input name="wsurl" id="wsurl" placeholder="wss://" value="wss://ws.postman-echo.com/raw">
            <button type="button" id="connect" onclick="connectSocket()">Connect</button>
        </div>
        <div id="connected">
            <input name="message" id="message" value="Hello world!">
            <button type="button" id="send" onclick="sendMessage()">Send</button>
            <button type="button" id="disconnect" onclick="disconnectSocket()">Disconnect</button>
        </div>
    </form>
    <div>
        <pre id="consoleLog" style="height: 350px; overflow-y: scroll;">- Connection log will appear here</pre>
    </div>
</div>
<script>
    hideElement(document.getElementById("connected"));
</script>
</body>
</html>